<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐星科技社 - 官方网站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 10px rgba(22, 93, 255, 0.5);
            }
            .bg-gradient-tech {
                background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-20px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen overflow-hidden">
    <div class="relative w-full h-screen flex items-center justify-center bg-gradient-tech">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary/20 blur-3xl"></div>
            <div class="absolute bottom-1/3 right-1/3 w-80 h-80 rounded-full bg-secondary/10 blur-3xl"></div>
        </div>

        <!-- 主内容 -->
        <div class="relative z-10 text-center px-4">
            <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-full max-w-md mx-auto">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-2 text-shadow">逐星科技社</h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-300 mb-8">
                <span class="text-sm lowercase">新宁一中</span> 逐星科技合作社 <span class="text-sm lowercase">官方网站</span>
            </p>
            <button onclick="window.location.href='index.html'" class="px-8 py-3 bg-primary hover:bg-primary/80 text-white rounded-full font-medium transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50">
                开始探索
            </button>
        </div>

        <!-- 底部装饰 -->
        <div class="absolute bottom-8 left-0 right-0 text-center text-gray-400 text-sm">
            <p>© 2024 逐星科技社 版权所有</p>
        </div>
    </div>
</body>
</html>
